<template>
  <div>
    <!-- 搜索区域 -->
    <a-form layout="horizontal">
      <a-row >
        <div>
          <a-col :md="6" :sm="24" >
            <a-radio-group defaultValue="a" buttonStyle="solid" v-model="dataType" @change="listData">
              <a-radio-button value="">全部</a-radio-button>
              <a-radio-button value="1">我的收藏</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :md="6" :sm="24" >
            <a-form-item
              label="歌曲"
              :labelCol="{span: 4}"
              :wrapperCol="{span: 18, offset: 2}">
              <a-input v-model="songName"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24" >
            <a-form-item
              label="歌手"
              :labelCol="{span: 4}"
              :wrapperCol="{span: 18, offset: 2}">
              <a-input v-model="singer"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24" >
            <a-form-item
              label=""
              :labelCol="{span: 4}"
              :wrapperCol="{span: 18, offset: 1}">
                <span style="padding-top: 3px;margin-left: 20px;">
                  <a-button type="primary" @click="listData">查询</a-button>
                  <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                </span>
            </a-form-item>
          </a-col>
        </div>
      </a-row>
    </a-form>
    <a-table ref="TableInfo"
             :columns="columns"
             :dataSource="data"
             :pagination="pagination"
             :loading="loading"
             @change="handleTableChange"
    >
      <template slot="img" slot-scope="text, record">
        <a-avatar :src="text"></a-avatar>
      </template>
      <audio :ref="record.id" @play="playMusic(record.id)" :key="record.id" controls="controls" slot="downloadUrl" slot-scope="text, record">
        <source :src="text" type="audio/mp3" />
        <source :src="text" type="audio/ogg" />
        <embed :src="text" />
      </audio>
      <template slot="moodMessage" slot-scope="text, record">
        <a @click="showMoodMessage(record)">心情寄语&nbsp;&nbsp;</a>
        <a @click="collectMusic(record)">{{record.isCollect == 1 ? '取消收藏' : '收藏'}}</a>
      </template>
    </a-table>
    <a-modal
      :title="dialogMoodTitle"
      :visible="dialogMood"
      @ok="updateMusicMood"
      :confirmLoading="false"
      @cancel="dialogMood = false"
    >
      <a-textarea placeholder="心情寄语" :rows="4" v-model="moodMessage"/>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'MusicList',
  data () {
    return {
      data: [],
      dataType: '',
      songName: '',
      singer: '',
      musicId: '',
      isCollect: 0,
      userId: this.$store.state.account.user.userId,
      dialogMood: false,
      dialogMoodTitle: '',
      moodMessage: '',
      columns: [
        {
          title: '',
          dataIndex: 'img',
          scopedSlots: { customRender: 'img' },
          width: 60
        },
        {
          title: '歌曲',
          dataIndex: 'songName',
          ellipsis: true
        }, {
          title: '歌手',
          dataIndex: 'singer'
        }, {
          title: '播放',
          dataIndex: 'downloadUrl',
          scopedSlots: { customRender: 'downloadUrl' },
          align: 'center',
          width: 400
        }, {
          title: '操作',
          dataIndex: 'moodMessage',
          scopedSlots: { customRender: 'moodMessage' },
          align: 'center',
          width: 150
        }
      ],
      loading: true,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }
    }
  },
  methods: {
    handleTableChange (pagination) {
      this.paginationInfo = pagination
      this.listData()
    },
    reset () {
      this.songName = ''
      this.singer = ''
    },
    playMusic (id) {
      for (let item of this.data) {
        if(item.id != id) {
          this.$refs[item.id].pause()
        }
      }
    },
    collectMusic (record) {
      this.musicId = record.id
      if (record.isCollect) {
        record.isCollect == 0 ? this.isCollect = 1 : this.isCollect = 0
      } else {
        this.isCollect = 1
      }
      this.updateMusicMood()
    },
    updateMusicMood () {
      this.$post('music/update', {
        userId: this.userId,
        musicId: this.musicId,
        moodMessage: this.moodMessage,
        isCollect: this.isCollect
      }).then((r) => {
        this.listData()
      }).catch((r) => {

      })
      this.moodMessage = ''
      this.isCollect = 0
      this.dialogMood = false
    },
    showMoodMessage (record) {
      this.musicId = record.id
      this.dialogMoodTitle = `${record.songName}(${record.singer})`
      this.moodMessage = record.moodMessage
      this.isCollect = record.isCollect
      this.dialogMood = true
    },
    listData () {
      let params = {}
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      this.$get('music/list', {
        ...params,
        songName: this.songName,
        singer: this.singer,
        userId: this.userId,
        musicId: this.musicId,
        dataType: this.dataType
      }).then((r) => {
        this.data = r.data.rows
        console.log(r)
        const pagination = { ...this.pagination }
        pagination.total = r.data.total
        this.pagination = pagination
        // 数据加载完毕，关闭loading
        this.loading = false
      })
    }
  },
  mounted () {
    this.listData()
  }
}
</script>

<style scoped>

</style>
